<template>
  <div class="list-component">
        <el-form  class="search-bar" :inline="true" :model="searchObj">
          <el-form-item label="设备名称">
            <el-input v-model="searchObj.name" placeholder="请输入设备名称"></el-input>
          </el-form-item>
            <el-form-item label="设备编号">
                <el-input v-model="searchObj.code" placeholder="请输入设备编号"></el-input>
            </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      <div class="list">
        <div class="button-bar">
          <el-button class="btn" type="primary" size="mini" icon="el-icon-plus"  @click="onAdd"  v-pms="'gpsEdit'">新建</el-button>
          <el-button class="btn" type="warning" size="mini" icon="el-icon-edit" @click="onEdit"  v-pms="'gpsEdit'">编辑</el-button>
          <el-button class="btn" type="danger" size="mini" icon="el-icon-delete" @click="onDelete"  v-pms="'gpsDelete'">删除</el-button>
        </div>
        <div class="data">
          <el-table  :data="listData.data" ref="listData" @selection-change="selectChange" stripe v-height="'auto'" >
              <el-table-column    type="selection"  align="center"        width="55"></el-table-column>
              <el-table-column type="index" label="序号" prop="index" align="center" width="60px" >
                  <div slot-scope="scope">
                      {{(listData.pageNum - 1) * listData.pageSize + 1 + scope.$index }}
                  </div>
              </el-table-column>
              <el-table-column label="设备名称" prop="name" ></el-table-column>
          	<el-table-column label="设备编号" prop="code" ></el-table-column>
          	<el-table-column label="责任人" prop="responsible" ></el-table-column>
              <el-table-column label="操作" prop="status" align="center" v-if="false">
                  <slot slot-scope="scope">
                      <el-button size="mini" disabled @click="viewDetail(scope.row)">查看</el-button>
                  </slot>
              </el-table-column>
          </el-table>
        </div>
          <el-pagination layout="prev, pager, next"
                         :current-page="listData.pageNum"
                         :page-size="listData.pageSize"
                         :total="listData.total"
                         @current-change="getList"
                         @prev-click="getList"
                         @next-click="getList"
          ></el-pagination>
      </div>
    <el-dialog :title="optType" :visible.sync="showDialog">
      <component v-bind:is="curComponent" @closeDialog="closeDialog" :initData="initData"  @refresh="refresh"></component>
    </el-dialog>
  </div>
</template>
<script>
import edit from "./device-edit.vue";
import Details from "./device-detail";
export default {
	props:{
		placeTypeList:[Array]
	},
  components: { edit, Details },
  data() {
    return {
		searchObj: {
		    name: "",
            code:""
		},
      listData: {
        pageNum: 1, //页码
        pageSize:15,
        total: 5, //总共条数
        data: []
      },
      checked:[],//选择的列表
      optType: "编辑", //新增区划/编辑区划/导入/导出
      showDialog: false,
      curComponent: "edit", //Details，edit/导入/到处...
      initData:{},
	  approveStateList:[]
    };
  },
  watch:{
    List:{
      handler(val){

      },deep:true
    },
    showDialog(val){
      if(!val){
        this.initData={}
        this.checked=[]
        this.$refs.listData.clearSelection();
      }
    }
  },
  methods: {
    getList(pageNum){
        var submitData={
            current:typeof pageNum=='number' ? pageNum : this.listData.pageNum,
            size:this.listData.pageSize,
            ...this.searchObj,
        };

        this.$http.getGpsDevice(submitData)
        .then((res)=>{
            var data=res.data.data;
            this.$set(this.listData,'pageNum',data.current);
            this.$set(this.listData,'pageSize',data.size);
            this.$set(this.listData,'total',data.total);
            this.$set(this.listData,'data',data.records)
        }).catch((err)=>{
            throw(err)
        })
    },
    //列表选择发生改变
      selectChange(val){
       this.checked = val;
      },
    refresh(){
      this.getList()
    },

    //添加车辆
    onAdd() {
      this.$refs.listData.clearSelection();
      this.optType = "新增";
      this.showDialog = true;
      this.curComponent=edit
      this.$nextTick(()=>{
        this.checked = [];
        this.initData=this.checked[0]
      })
    },

    //编辑车辆
    onEdit(index, row) {
      if (this.checked.length > 1) {
        this.$message.warning("只能选中一个");
        return;
      } else if (this.checked.length === 0) {
        this.$message.warning("请选中要编辑的车辆");
        return;
      }

      this.curComponent=edit
      this.optType = "编辑车辆";
      this.showDialog = true;
      this.$nextTick(()=>{
        this.initData=this.checked[0]
      })
    },
      viewDetail(rowData){
        this.$message.info("暂无内容！！！");
        return
          /*this.curComponent = Details
          this.optType = "设备详情";
          this.showDialog = true;
          this.$nextTick(()=>{
              this.initData = rowData
          })*/
      },
    //删除车辆
    onDelete() {
      if(this.checked.length===0){
        this.$message.warning("请选择要删除的设备!")
        return
      }else if(this.checked.length > 1){
          this.$message.warning("请你选择一个进行删除!")
          return
      }
	  this.$confirm('请确认是否删除?', '警告', {
	     confirmButtonText: '确定',
	     cancelButtonText: '取消',
	     type: 'warning'
	   }).then(() => {
	  			var submitData={id:this.checked[0].id}
	  			this.$http.delGpsDevice(submitData)
	  			.then(res => {
	  			    this.getList(); //重新加载列表
	  			}).catch(err => {
	  			  throw ("delete接口报错：", err);
	  			});
	   })
    },

    //全选
    onSelectAll(selection) {
      this.checked = selection;
    },
    //选择
    onSelect(selection, row) {
      this.checked = selection;
    },

    closeDialog(bool) {
      this.showDialog = bool;
    },

    //查看详情
    showDetails(rowData){
      this.curComponent=Details
      this.optType = "查看详情";
      this.showDialog = true;
      this.$nextTick(()=>{
        this.initData=rowData.row
      })
    },

	/*transData(data){
		data.forEach((item)=>{
			this.approveStateList.forEach((item1)=>{
				if(item.status==item1.code){
					item.statusName=item1.name
				}
			})
		})
		return data;
	},*/

  },
  created() {
    this.getList();
  }
};
</script>


